<template>
	<view class="videos">
		<swiper circular :current="curSortIndex" class="swiper" @animationfinish="animationfinish">
			<swiper-item v-for="index of navLength" :key="index">
				<view class="swiper-item">
					<scroll-view scroll-y v-show="videoList.length > 0" :refresher-triggered="isTrigger" refresher-enabled @refresherrefresh="onRefresh" @scrolltolower="scrolltolower">
						<view class="scroll-view-content">
							<view class="scroll-view-item" @click="toVideoPlayer(video.data.vid, video.type)" v-for="(video, index) in videoList" :key="index">
								<image class="video-img" :src="video.data.coverUrl" lazy-load>
								</image>
								<view class="video-name text_2line_ellipsis">{{ video.data.title }}</view>
							</view>
						</view>
						<view v-if="!hasmore" class="tip">没有更多了~~</view>
					</scroll-view>
					<view class="tip" v-show="videoList.length ===0 && !isTrigger">视频数据加载中...</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		videoGroup
	} from '../../../api/index.js'
	export default {
		name: 'Videos',
		data() {
			return {
				videoList: [],
				// 是否还有下一页数据
				hasmore: true,
				// 下拉刷新是否已被触发
				isTrigger: false
			}
		},
		created() {
			this.videoGroupFun({ id: this.videoGroupId, cookie: this.cookie })
		},
		props: {
			// 分类导航个数
			navLength: {
				type: Number,
				default: 0
			},
			// 分类id
			videoGroupId: {
				type: Number,
				required: true
			},
			// 登录cookie
			cookie: {
				type: String,
				required: true
			},
			// 当前所在分类索引
			curSortIndex: {
				type:Number,
				default: 0
			}
		},
		watch: {
			curSortIndex() {
				/** 重置 */
				// 清空
				this.videoList = []
				this.hasmore = true
				// 发请求,重新获取数据
				this.videoGroupFun({ id: this.videoGroupId, cookie: this.cookie })
			}
		},
		methods: {
			// 跳转到视频播放页面
			toVideoPlayer(id,type) {
				uni.navigateTo({
					url: '/pages/videoplayer/videoplayer?id=' + id + '&type=' + type
				})
			},
			// 请求视频数据
			async videoGroupFun(data) {
				const res = await videoGroup(data)
				if (res.data.code === 301 || res.data.code === 302) {
					uni.hideLoading()
					uni.showToast({
						title: '请先登录！',
						icon: 'none',
						mask: true
					})
				} else if (res.data.code === 200) {
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						mask: false
					})
					this.hasmore = res.data.hasmore
					this.videoList = [...this.videoList, ...res.data.datas]
					// 请求数据太快,使用定时器延迟下,使用户看到上拉加载数据的等待ui
					setTimeout(() => {
						this.isTrigger = false
					}, 1500)
				}
			},
			// 上拉加载
			scrolltolower() {
				uni.showLoading({
					title: '加载视频中...'
				})
				// 请求下一页的数据
				this.videoGroupFun({ id: this.videoGroupId, cookie: this.cookie, offset: this.videoList.length })
			},
			// 下拉刷新
			onRefresh() {
				// 防止触发多次,当scroll-view的refresher-triggered属性为true期间,
				// 会一直触发@refresherrefresh监听,故得在其为true时不触发异步请求数据
				if (!this.isTrigger) {
					this.isTrigger = true
					// 得到当前视频列表的长度
					const offset = this.videoList.length
					// 清空视频列表
					this.videoList = []
					// 重新获取数据
					this.videoGroupFun({ id: this.videoGroupId, cookie: this.cookie, offset })
				}
			},
			// 左右滑动切换
			animationfinish(e) {
				// 最新的当前索引
				const { current } = e.detail
				// 调用父级的事件改变curSortIndex
				this.$emit('changeIndex', current)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videos {
		width: 100%;
		/* #ifndef H5 */
		height: calc(100vh - 260rpx);
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 450rpx);
		/* #endif */
		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				height: 100%;

				scroll-view {
					height: 100%;
					padding: 0 1%;

					.scroll-view-content {
						display: flex;
						flex-wrap: wrap;

						.scroll-view-item {
							width: 45%;
							margin: 2%;
							background-color: #FFFFFF;
							border: 1rpx solid #eee;
							box-shadow: 0 -6rpx 6rpx rgb(156, 156, 156);
							border-radius: 20rpx;
							.video-img {
								width: 100%;
								height: 230rpx;
								border-radius: 20rpx;
                /* #ifdef APP-PLUS */
                background: url('@/static/images/song/default.png') no-repeat center center;
                background-size: cover;
                /* #endif */
							}
							.video-name {
								font-size: 26rpx;
								padding: 6rpx 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
